บทความด้านคอมพิวเตอร์

บทความ, องค์ความรู้, การทำเว็บไซต์, ทำโปรแกรม

ค้นหา และศึกษาบทความด้านคอมพิวเตอร์ การเขียนเว็บไซต์ ทำเว็บไซต์ ทำโปรแกรม ทำโปรแกรมบนมือถือ ออกแบบเว็บไซต์ การเขียนโปรแกรม การออกแบบเว็บไซต์ ฐานข้อมูล รวมไปถึงข่าวแวดวง IT, Computer และบทความต่าง ๆ ที่ถูกคัดสรรมาอย่างดี ด้วยเนื้อหาที่สดใหม่ กระชับ และอ่านเข้าใจง่าย ซึ่งจะทำให้คุณสามารถที่จะแก้ไขปัญหาต่าง ๆ จากบทความ และองค์ความรู้ที่ทางเราเลือกมาให้ โดยบทความทุกบทความถูกเขียนขึ้นใหม่ ในเรื่องต่าง ๆ เพื่อนำเสนอมุมมองใหม่ ๆ ให้กับผู้อ่านทุกคน


ประเภทบทความ
บทความด้านคอมพิวเตอร์

    slideToggle() jQuery การแสดง ซ้อน Elements แบบ Slide Toggle

    บทความวันที่ 15 พฤศจิกายน 2555

    slideToggle() คือ คำสั่งของ jQuery ในหมวดของ Effects มีไว้สำหรับสร้างการทำงานแบบแสดง (Show) และซ้อน (Hide) Elements ในลักษณะแบบ Toggle แต่มี Effect แบบ Effect Slide Up และ Slide Down

     

    ภาพรวมของ slideToggle

    1. ใช้สำหรับการซ้อน และแสดง Elements ด้วย Effect แบบ Slide Up และ Slide Down

    2. รูปแบบการใช้งานคือ $('[Target_Element]').slideToggle('[Duration]') 

    3. คำสั่งมี Parameter ที่สำคัญคือ duration (ระยะเวลา), easing (ข้อมูลที่ใช้สำหรับการสื่อสาร) และ callback (Function สำหรับการตอบกลับหลังการประมวลเสร็จ)

     

    ตัวอย่างโปรแกรม

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <title>amplysoft.com</title>
    </head>
    <body>
    
    <input type='button' value='Slide Toggle' />
    
    <p>amplysoft รับเขียนเว็บ รับทำเว็บ เรียนเขียนโปรแกรม PHP, JAVA, ASP.NET</p>
    
    <div id='result'></div>
    
    <script type="text/javascript">
    $(document).ready(function(){
    	
    	$('input').click(function(){
    		$('p').slideToggle('slow');
    	});
    
    });
    </script>
    </body>
    </html>
    

     

    ผลลัพธ์


    อ่านเนื้อหาอื่นเพิ่มเติมฟรี ได้ที่
    Devdit - พบคำตอบด้านไอทีและทำตามง่ายๆ



    คำค้นหา slideToggle() jQuery, รับทำเว็บ, รับเขียนเว็บ, เรียนเขียนโปรแกรม